<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>豹子奔跑动画（修复第二行）</title>
    <style>
        .red-frame {
            width: 160px;
            /* 单帧宽度 */
            height: 70px;
            /* 单帧高度 */
            border: 2px solid red;
            overflow: hidden;
            margin: 50px auto;
        }

        .cheetah {
            width: 160px;
            height: 70px;
            background: url('cdea63b3b9bef4135ac79d92473904a5.png') no-repeat;
            /* 替换为你的图片路径 */
            animation: run 0.8s steps(1) infinite;
            /* 每步切换1帧 */
        }

        /* 关键帧：逐帧指定8个位置（2行4列） */
        @keyframes run {
            0% {
                background-position: 0 0;
            }

            /* 第1帧：第1行第1列 */
            12.5% {
                background-position: -160px 0;
            }

            /* 第2帧：第1行第2列 */
            25% {
                background-position: -320px 0;
            }

            /* 第3帧：第1行第3列 */
            37.5% {
                background-position: -480px 0;
            }

            /* 第4帧：第1行第4列 */
            50% {
                background-position: 0 -70px;
            }

            /* 第5帧：第2行第1列（Y轴上移70px） */
            62.5% {
                background-position: -160px -70px;
            }

            /* 第6帧：第2行第2列 */
            75% {
                background-position: -320px -70px;
            }

            /* 第7帧：第2行第3列 */
            87.5% {
                background-position: -480px -70px;
            }

            /* 第8帧：第2行第4列 */
            100% {
                background-position: 0 0;
            }

            /* 回到起点，循环 */
        }
    </style>
</head>

<body>
    <div class="red-frame">
        <div class="cheetah"></div>
    </div>
</body>

</html>